@import "colors";

body.openid-connect-link {
    background: linear-gradient(#FFFFFF 0%, #F5F5F5 75%);
    text-align: center;
}

#login-box > #login-openid-title {
    margin: 10px 0 30px;
    font-size: 30px;
}

#linked-providers > .provider {
    display: inline-block;
    width: 20%;
    min-width: 200px;
    margin: 0 4% 20px 0;
    border: 1px solid #dddddd;
    border-radius: 3px;

    > .provider-header {
        background: #eeeeee;
        border-bottom: 2px solid #333333;
        padding: 10px;

        > .provider-name {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }
    }

    > .provider-content {
        padding: 10px;
        text-align: right;

        > .provider-last-login-date {
            color: #888888;
            font-size: 12px;
            text-align: left;
        }
    }
}

#providers-configuration {
    .modal {
        .modal-header {
            border-bottom: 2px solid #888888;
        }

        .modal-body {
            max-height: none;

            label, > .preview-label {
                margin-bottom: 2px;
                font-weight: 600;
                font-size: 12px;
                color: #555;
            }

            input {
                width: 100%;
                box-sizing: border-box;
                height: 35px;
            }

            .info {
                font-size: 12px;
                color: #4DB3D0;
                margin: 0 0 5px;

                &.provider-callback-url {
                    font-weight: 600;
                    margin: 0 0 15px;
                }
            }

            .provider-name, .provider-user-info-endpoint {
                margin: 0 0 30px;
            }

            > .preview-label {
                margin: 30px 0 5px;
            }

            > .provider-button-preview {
                text-align: center;
                padding: 20px;
                background: #f3f3f3;
                border: 1px solid #ededed;
                border-radius: 4px;

                > a {
                    padding: 20px;
                    box-sizing: border-box;
                    font-size: 20px;
                    line-height: normal;

                    > i {
                        margin: 0 3px 0 0px;
                        font-size: 18px;
                    }
                }
            }

            .highlight {
                color: red;
            }
        }
    }

    #providers {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 30px 0 0;

        .provider {
            display: flex;
            flex-direction: column;
            position: relative;
            width: 370px;
            margin: 0 30px 30px 0;
            border: 1px solid #ededed;
            border-radius: 4px;
            box-sizing: border-box;

            > .provider-background-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -1;
                font-size: 200px;
                opacity: 0.03;
            }

            > h3 {
                flex: 0 0 auto;
                margin: 0;
                padding: 13px 10px;
                background: #eeeeee;
                border-bottom: 2px solid #333333;
                font-size: 16px;
                line-height: normal;

                > .provider-icon {
                    font-size: 16px;
                    margin: 0 2px 0 0;
                }
            }

            > .provider-endpoint, > .provider-client {
                flex: 1 1 auto;
                padding: 10px;
                border-bottom: 1px solid #ededed;

                > span {
                    display: block;
                    font-size: 13px;
                    word-wrap: break-word;

                    &.provider-label {
                        margin: 10px 0 0;
                        color: #888888;
                        font-size: 11px;
                        font-weight: 600;

                        &:first-child {
                            margin: 0;
                        }
                    }
                }
            }

            > .provider-actions {
                flex: 0 0 auto;
                background: #f6f6f6;
                text-align: right;
                padding: 10px;

                > form {
                    display: inline-block;
                    margin: 0;
                }
            }
        }
    }
}

#login-openid-providers, #login-openid-register {
    #login-openid-or {
        display: block;
        position: relative;
        height: 100px;
        color: #bbbbbb;
        font-size: 12px;

        > span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 0 10px;
            background: #ffffff;
            z-index: 2;
            white-space: nowrap;
        }

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #f1f1f1;
            z-index: 1;
        }
    }

    #login-openid-register-button {
        display: block;
        margin: 0;
        padding: 15px 5px;
        font-size: 20px;
        box-sizing: border-box;
        line-height: normal;
    }

    #login-openid-providers-list {
        > a {
            display: block;
            width: 50%;
            margin: 0 auto 10px;
            padding: 18px 5px;
            font-size: 16px;
            box-sizing: border-box;
            line-height: normal;

            > i {
                margin: 0 3px 0 0px;
                font-size: 18px;
            }
        }

        > a:first-child:nth-last-child(1) {
            margin: 0;
            width: 100%;
        }

        > a:first-child:nth-last-child(2), > a:first-child:nth-last-child(2) ~ a {
            display: inline-block;
            width: 49%;

            &:first-child {
                margin: 0 1% 0 0;
            }
            &:last-child {
                margin: 0 0 0 1%;
            }
        }

        > a:first-child:nth-last-child(4), > a:first-child:nth-last-child(4) ~ a {
            display: inline-block;
            width: 49%;

            &:nth-child(2n+1) {
                margin: 0 1% 10px 0;
            }
            &:nth-child(2n) {
                margin: 0 0 10px 1%;
            }
        }
    }
}

.provider-select2-select {
    display: block;

    .select2-choice {
        height: 35px;
        box-sizing: border-box;
        border: 1px solid #cccccc;

        > div {
            width: 20px;
            border-left: 1px solid #cccccc;

            > b {
                background-position: 2px 4px;
            }
        }
    }

    &.provider-icon-selector .select2-choice {
        padding: 4px 0;
        text-align: center;

        > span {
            margin-right: 20px;

            > i {
                font-size: 26px;
            }
        }
    }

    &.provider-color-selector .select2-choice {
        padding: 0;
        overflow: visible;

        > span {
            height: 100%;
            margin-right: 19px;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;

            > span {
                display: block;
                height: 100%;
                margin: 0;

                &.inca_silver {
                    background: $inca_silver;
                }
                &.chrome_silver {
                    background: $chrome_silver;
                }
                &.fiesta_red {
                    background: $fiesta_red;
                }
                &.teddy_brown {
                    background: $teddy_brown;
                }
                &.clockwork_orange {
                    background: $clockwork_orange;
                }
                &.red_wine {
                    background: $red_wine;
                }
                &.acid_green {
                    background: $acid_green;
                }
                &.army_green {
                    background: $army_green;
                }
                &.sherwood_green {
                    background: $sherwood_green;
                }
                &.ocean_turquoise {
                    background: $ocean_turquoise;
                }
                &.daphne_blue {
                    background: $daphne_blue;
                }
                &.lake_placid_blue {
                    background: $lake_placid_blue;
                }
                &.deep_blue {
                    background: $deep_blue;
                }
                &.plum_crazy {
                    background: $plum_crazy;
                }
                &.peggy_pink {
                    background: $peggy_pink;
                }
                &.flamingo_pink {
                    background: $flamingo_pink;
                }
            }
        }
    }

    &.select2-dropdown-open .select2-choice > div > b {
        background-position: -16px 4px;
    }
}

.provider-select2-dropdown {
    > .select2-search {
        display: none;
    }

    > ul.select2-results {
        text-align: center;

        > li:first-child {
            height: 25px;
        }

        > li span {
            display: block;
            height: 25px;

            &.inca_silver {
                background: $inca_silver;
            }
            &.chrome_silver {
                background: $chrome_silver;
            }
            &.fiesta_red {
                background: $fiesta_red;
            }
            &.teddy_brown {
                background: $teddy_brown;
            }
            &.clockwork_orange {
                background: $clockwork_orange;
            }
            &.red_wine {
                background: $red_wine;
            }
            &.acid_green {
                background: $acid_green;
            }
            &.army_green {
                background: $army_green;
            }
            &.sherwood_green {
                background: $sherwood_green;
            }
            &.ocean_turquoise {
                background: $ocean_turquoise;
            }
            &.daphne_blue {
                background: $daphne_blue;
            }
            &.lake_placid_blue {
                background: $lake_placid_blue;
            }
            &.deep_blue {
                background: $deep_blue;
            }
            &.plum_crazy {
                background: $plum_crazy;
            }
            &.peggy_pink {
                background: $peggy_pink;
            }
            &.flamingo_pink {
                background: $flamingo_pink;
            }
        }

        i {
            font-size: 26px;
        }
    }
}
